<template>
	<uni-forms-item name="isRegExp" label="是否启用正则">
		<uni-data-checkbox style="position: relative; top: 8rpx" v-model="formData.isRegExp" :disabled="disabled"
			:localdata="regExpOptions" @change="handleToggleRegStatus" />
	</uni-forms-item>
	<uni-forms-item required label="正则校验" name="regExp" v-if="formData.isRegExp === '1'">
		<cl-select-picker :options="inputRegList" v-model="formData.regExp" :disabled="disabled"></cl-select-picker>
	</uni-forms-item>
	<uni-forms-item required label="自定义正则校验" name="costomRegExp" v-if="formData.isRegExp === '2'">
		<uni-easyinput v-model="formData.costomRegExp" :disabled="disabled" placeholder="请输入"></uni-easyinput>
	</uni-forms-item>
	<uni-forms-item label="最大长度" name="maxlength">
		<uni-easyinput v-model="formData.maxlength" type="text" placeholder="不填则不限制" :disabled="disabled"
			:cursorSpacing="20" />
	</uni-forms-item>
	<uni-forms-item label="默认值" name="defaultVal">
		<uni-easyinput v-model="formData.defaultVal" type="text" placeholder="请输入" :disabled="disabled" :cursorSpacing="20">
			<template #right v-if="formData.maxlength">
				<view class="length_tip">{{formData.defaultVal?.length || 0}} / {{formData.maxlength}}</view>
			</template>
		</uni-easyinput>
	</uni-forms-item>

</template>

<script setup>
	import {
		inputRegList,
	} from '@/config/field.js'

	import {
		stringToRegExp
	} from '@/utils/index.js'
	const props = defineProps({
		disabled: Boolean
	})
	const formData = defineModel()

	const regExpOptions = [{
			text: '不启用',
			value: '0'
		},
		{
			text: '启用',
			value: '1'
		},
		{
			text: '自定义',
			value: '2'
		},
	]
	// 切换正则状态
	const handleToggleRegStatus = (val) => {
		formData.value.costomRegExp = ''
		formData.value.regExp = ''
	}
</script>